<template>
  <section id="hot-commodity">
    <header>
      <h5 class="headline">热门商品</h5>
      <aside>
        <button @click="previous" class="high"></button>
        <button @click="next"></button>
      </aside>
    </header>
    <aside>
      <section v-for="(item, index) of commodity" :key="index" ref="sel">
        <figure>
          <img :src="item.url" alt="">
        </figure>
        <article>
          <h3>坚果 Pro 3</h3>
          <h5>高通骁龙™ 855Plus · 4800 万模范四摄 · Smartisan OS 7.0</h5>
        </article>
        <aside>
          <figure><img src="../../../assets/images/hotcomm/dfcf31bfabe72a12631c1d0166bf8ddb.png" alt=""></figure>
          <figure><img src="../../../assets/images/hotcomm/54ca063d623bb87f61ab0eea41ebe050.png" alt=""></figure>
        </aside>
        <article>
          <span>￥199.00</span>
        </article>
      </section>
    </aside>
  </section>
</template>

<script>
export default {
  name: 'HotCommdity',
  data () {
    return {
      commodity: []
    }
  },
  methods: {
    // 切换到上一屏商品页
    previous (ev) {
      var sels = this.$refs.sel
      for (var i = 0, len = sels.length; i < len; i++) {
        sels[i].style.transform = 'translate(0)'
      }
      ev.target.className = 'high'
      ev.target.nextElementSibling.className = ''
    },
    // 切换到下一屏商品页
    next (ev) {
      var sels = this.$refs.sel
      for (var i = 0, len = sels.length; i < len; i++) {
        sels[i].style.transform = 'translate(-1224px, 0px)'
      }
      ev.target.className = 'high'
      ev.target.previousElementSibling.className = ''
    },
    getCommodity () {
      this.axios.get('HotCommodityServlet.main').then(result => {
        if (result.status === 200) {
          this.commodity = result.data
        }
      })
    }
  },
  created () {
    this.getCommodity()
  }
}
</script>

<style scoped>
  #hot-commodity {
    width: 1220px;
    margin: 25px auto 0;
    border: 1px solid rgba(0, 0, 0, .14);
    box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1);
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden;
    /*height: 400px;*/
  }

  #hot-commodity > header {
    position: relative;
    line-height: 60px;
    background-color: #fafafa;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
  }

  #hot-commodity > header > h5 {
    margin-left: 25px;
    font-size: 18px;
    font-weight: bold;
    color: #666;
  }

  #hot-commodity > header > aside {
    position: absolute;
    height: 60px;
    top: 0;
    right: 0;
  }

  #hot-commodity > header > aside > button {
    cursor: pointer;
    outline: none;
    width: 48px;
    height: 48px;
    background: url("../../../assets/images/hotcomm/jiantou.png");
    background-size: 48px;
    padding: 0;
    border: none;
    margin-top: 6px;
  }

  #hot-commodity > header > aside > button:first-of-type {
    transform: rotate(180deg);
  }

  #hot-commodity > header > aside > button.high {
    pointer-events: none;
    opacity: .3;
  }

  #hot-commodity > aside {
    display: flex;
    justify-content: space-between;
  }

  #hot-commodity > aside > section {
    cursor: pointer;
    border-right: 1px solid rgba(0, 0, 0, .1);
    overflow: hidden;
    flex: 0 0 25%;
    transition: transform .5s cubic-bezier(.38,.55,.69,.41), box-shadow .3s;
  }
  #hot-commodity > aside > section:hover {
    box-shadow: inset 0 0 38px rgba(0,0,0,.08);
  }

  #hot-commodity > aside > section > article {
    cursor: pointer;
    text-align: center;
  }

  #hot-commodity > aside > section > article > h3 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #333;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0 8px;
  }

  #hot-commodity > aside > section > article > h5 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 12px;
    color: #999;
    padding: 15px 12px 0;
    line-height: 1.2;
  }
  #hot-commodity > aside > section > aside {
    cursor: pointer;
    margin-top: 15px;
    text-align: center;
  }
  #hot-commodity > aside > section > aside > figure {
    width: 8px;
    height: 8px;
    padding: 2px;
    display: inline-block;
    margin: 0 5px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
  }
  #hot-commodity > aside > section > aside > figure > img {
    width: 100%;
    display: block;
  }
  #hot-commodity > aside > section > article {
    font-size: 18px;
    color: #d44d44;
    font-weight: bolder;
    margin: 20px 0;
  }
</style>
